<template> 
<view class="page">
	<view class="body">
		<template v-if="userInfo">
			<view class="feedback-area">
				<view class="title">反馈类型</view>
				<view class="label-type">
					<view class="item active">意见建议</view>
					<!-- <view class="item">体验问题</view> -->
				</view>
				<view class="textarea">
					<textarea v-model="feedback" value="" placeholder="输入您的宝贵意见" />
				</view>
			</view>
			<view class="btn" @click="submit">提交</view>
		</template>
	</view>
</view>
</template>

<script> 
export default{
	name:'demo',
	data(){
		return{ 
			userInfo:uni.getStorageSync('userInfo'),
			loginStateUpdate:false,
			isStop:true,
			feedback:''
		}
	},
	async onShow() {
		if(!this.userInfo){
			this.isLogin=await this.$loginState('reset'); 
		} 
		if(this.loginStateUpdate){			
			this.userInfo=uni.getStorageSync('userInfo');
			this.loginStateUpdate=false;
		}
	},
	onLoad() {
		
	},
	methods:{
		submit:async function(){
			let _this=this;
			
			if(this.isStop){
				this.isStop=false;
				if(this.feedback==''){ 
					uni.showToast({
						icon: 'none',
						title: '请输入您的反馈意见',
						mask: true,
						duration: 2000,
						success() {
							setTimeout(()=>{
								_this.isStop = true;
							},300)							
						}
					})
				}else{ 
					uni.showLoading({
						title: '提交中...',
						mask: true
					})
					let res=await this.$api.user_api.saveFeedBack({ 
						content: this.feedback
					})
					 
					if(res.data.ret==0){
						uni.hideLoading();
						uni.showToast({
							icon: 'success',
							title: '提交成功',
							mask: true,
							duration: 2000,
							success() {
								setTimeout(()=>{
									_this.isStop = true;
									uni.navigateBack({
										delta:1
									})
								},300)
							}
						})
					}else{
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							image:'../../static/images/error.png',
							title: res.data.msg,
							mask: true,
							duration: 2000,
							success() {
								setTimeout(()=>{
									_this.isStop = true;
								},300)
							}
						})
					} 
				}
			}
		}
	},
	computed:{
		
	},
	components:{
		
	}
}
</script>

<style lang="less">
.feedback-area{
	background: #fff;
}
.title{
	padding:20rpx;
	font-size: 28rpx;
} 
.label-type{
	display: flex;
	flex-wrap: wrap;
	padding:0 20rpx;
	.item{
		height:50rpx;
		line-height: 50rpx;
		padding: 0 10rpx;
		margin:0 20rpx 20rpx 0;
		background: #CCCCCC;
		border-radius: 10rpx;
		color:#fff;
		font-size: 28rpx;
	}
	.active{
		background: #f00;
		color:#fff;
	}
}
.textarea{
	padding:20rpx;
	margin:20rpx 0 ;
	border-top:2rpx solid #eee;
	border-bottom:2rpx solid #eee;
	background: #fff;
	textarea{
		width:96%; 
		height:200rpx;
		padding: 2%;
		background: #f5f5f5;
		border-radius: 15rpx;
		font-size: 28rpx;
	}
} 
   
.btn{
	height:80rpx;
	line-height: 80rpx;
	text-align: center;
	margin:0 20rpx 0;
	background: #f00;
	border-radius: 15rpx;
	color:#fff;
	font-size: 32rpx;
}
</style>
